<template>
	<el-divider>导航栏模式</el-divider>
	<div class="nav-mode">
		<div
			:class="[
				'item double-left',
				{
					active: menuTheme === 'Double Left',
				},
			]"
			@click="changeMenuTheme('Double Left')"
		>
			<i v-show="menuTheme === 'Double Left'" class="is-checked"></i>
			<div class="_content"></div>
		</div>
		<div
			:class="[
				'item top-left',
				{
					active: menuTheme === 'Top Left',
				},
			]"
			@click="changeMenuTheme('Top Left')"
		>
			<i v-show="menuTheme === 'Top Left'" class="is-checked"></i>
			<div class="_top"></div>
		</div>
		<div
			:class="[
				'item single-left',
				{
					active: menuTheme === 'Single Left',
				},
			]"
			@click="changeMenuTheme('Single Left')"
		>
			<i v-show="menuTheme === 'Single Left'" class="is-checked"></i>
		</div>
		<div
			:class="[
				'item narrow-top',
				{
					active: menuTheme === 'Narrow Top',
				},
			]"
			@click="changeMenuTheme('Narrow Top')"
		>
			<i v-show="menuTheme === 'Narrow Top'" class="is-checked"></i>
		</div>
	</div>
</template>

<script setup>
import { computed } from "vue"
import { useSettingStore } from "/store/setting"

const settingStore = useSettingStore()
const menuTheme = computed({
	get() {
		return settingStore.navigatorType
	},
	set(value) {
		settingStore.navigatorType = value
	},
})
function changeMenuTheme(name) {
	menuTheme.value = name
}
</script>

<style lang="scss" scoped>
.nav-mode {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	.item {
		width: 80px;
		height: 55px;
		margin: 10px;
		box-shadow: 0 0 5px 1px var(--el-border-color-lighter);
		background-color: var(--g-app-bg);
		cursor: pointer;
		border-radius: 5px;
		overflow: hidden;
		position: relative;
		outline: 2px solid transparent;
		transition: var(--transition);
		&.active {
			outline: 2px solid var(--el-color-primary);
		}
		.is-checked {
			position: absolute;
			z-index: 3;
			bottom: 5px;
			right: 5px;
			width: 12px;
			height: 12px;
			background: var(--active-color);
			border-radius: 50%;
			&::before {
				content: "";
				position: absolute;
				top: -1.5px;
				bottom: 0;
				right: 0;
				left: 0;
				margin: auto;
				color: var(--content-background);
				width: 6px;
				height: 3px;
				border-bottom: 1px solid currentColor;
				border-left: 1px solid currentColor;
				transform: rotate(-45deg);
			}
		}

		@mixin firstMenu {
			background: var(--el-color-primary);
			border-radius: 3px;
		}
		@mixin menu {
			background: var(--el-color-primary-light-3);
			border-radius: 3px;
		}
		@mixin content {
			background: var(--el-color-primary-light-7);
			border: 1px dashed var(--el-color-primary);
			box-sizing: border-box;
			border-radius: 3px;
		}

		&.double-left {
			display: flex;
			justify-content: center;
			align-items: center;
			&::before {
				content: "";
				width: 10px;
				height: 45px;
				@include firstMenu;
			}
			._content {
				width: 15px;
				height: 45px;
				margin: 0 4px;
				@include menu;
			}
			&::after {
				content: "";
				width: 35px;
				height: 45px;
				@include content;
			}
		}
		&.top-left {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			._top {
				position: absolute;
				top: 5px;
				left: 5px;
				right: 5px;
				height: 10px;
				@include firstMenu;
			}
			&::before {
				content: "";
				width: 15px;
				height: 30px;
				margin-bottom: 5px;
				@include menu;
			}
			&::after {
				content: "";
				width: 50px;
				height: 30px;
				margin-bottom: 5px;
				margin-left: 5px;
				@include content;
			}
		}
		&.single-left {
			display: flex;
			justify-content: center;
			align-items: center;

			&::before {
				content: "";
				width: 15px;
				height: 45px;
				@include menu;
			}
			&::after {
				content: "";
				width: 50px;
				height: 45px;
				margin-left: 5px;
				@include content;
			}
		}
		&.narrow-left {
			display: flex;
			justify-content: center;
			align-items: center;

			&::before {
				content: "";
				width: 10px;
				height: 45px;
				@include firstMenu();
			}
			&::after {
				content: "";
				width: 55px;
				height: 45px;
				margin-left: 5px;
				@include content;
			}
		}
		&.narrow-top {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			&::before {
				content: "";
				position: absolute;
				top: 5px;
				left: 5px;
				right: 5px;
				height: 10px;
				@include firstMenu;
			}
			&::after {
				content: "";
				width: 70px;
				height: 30px;
				margin-bottom: 5px;
				@include content;
			}
		}
	}
}
</style>
